{% extends 'home.html' %}
{% block content_main %}
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title text-center">图书展示页面</h3>
        </div>
        <div class="panel-body">
            <!-- Default panel contents -->
            <div><a href="{% url 'book_add' %}" type="button" class="btn btn-success">添加图书</a></div>
            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>简介</th>
                    <th>封面</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>出版日期</th>
                    <th>编辑</th>
                </tr>
                </thead>
                <tbody>
                {% for i in book_queryset_list %}
                    <tr class="active">
                        <th>{{ forloop.counter|add:sid }}</th>
                        <td>{{ i.title }}</td>
                        <td>{{ i.price }}</td>
                        <td>{{ i.desc|truncatechars:8 }}</td>
                        <td><img src="{{ i.cover }}" alt="" style="height: 60px;width: auto"></td>
                        <td>
                            {% for author_data in  i.author.all %}
                                {% if forloop.last %}
                                    {{ author_data.name }}
                                {% else %}
                                    {{ author_data.name }},
                                {% endif %}
                            {% endfor %}
                        </td>
                        <td>{{ i.publish.name }}</td>
                        <td>{{ i.publish_date|date:"Y-m-d" }}</td>
                        <td>
                            <form method="post" action="">
                                <input type="hidden" name="book_id" value="{{ i.id }}">
                                <button type="button" data-toggle="modal" data-target="#myModal{{ i.id }}"
                                        class="btn btn-success">修改
                                </button>
                                <!-- 模态框 -->
                                <div id="myModal{{ i.id }}" class="modal fade" tabindex="-1" role="dialog">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">输入需要修改的内容</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="inputTitle">书 名</label>
                                                    <br>
                                                    <input type="text" id="inputTitle" name="title"
                                                           value="{{ i.title }}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="inputPrice">价 格</label>
                                                    <br>
                                                    <input type="text" id="inputPrice" name="price"
                                                           value="{{ i.price }}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="desc">简 介</label>
                                                    <br>
                                                    <input type="text" id="desc" name="desc"
                                                           value="{{ i.desc }}" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label for="author">作者</label>
                                                    <select name="author_id" id="author"
                                                            multiple="multiple">
                                                        {% for date in author_all %}
                                                            <option value="{{ date.pk }}">{{ date.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="inputPublish">出版社</label>
                                                    <br>
                                                    <select name="publish_id" id="inputPublish"
                                                            style="width: 200px">
                                                        {% for publish in publish_date %}
                                                            <option value="{{ publish.pk }}">{{ publish.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="submit" name="action" value="update"
                                                        class="btn btn-primary">确定
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <button class="btn btn-danger b44" value="{{ i.pk }}">删除
                            </button>
                            <script>
                                $(".b44").click(function () {
                                    let id = $(this).val();
                                    swal({
                                        title: "确定要删除吗？",
                                        icon: "warning",
                                        buttons: ['取消', '确定'],
                                        dangerMode: true,
                                    })
                                        .then((willDelete) => {
                                            if (willDelete) {
                                                $.ajax({
                                                    url: "/book/detail/",
                                                    method: "POST",
                                                    data: {
                                                        'id': id,
                                                        'action': 'del'
                                                    },
                                                    success: function (data) {
                                                        swal("这条数据已删除", {
                                                            icon: "success",
                                                        }).then(() => {
                                                            location.reload(); // 删除成功后刷新页面
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                })
                            </script>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 text-center">
                        {{ page_obj.page_html|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}
